<template>
  <div class="form-examples-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">表单示例</h1>
        <p class="page-subtitle">展示各种表单组件和交互效果的综合示例</p>
      </div>
      <div class="header-actions">
        <el-button-group>
          <el-button 
            v-for="tab in formTabs" 
            :key="tab.key"
            :type="activeTab === tab.key ? 'primary' : 'default'"
            @click="activeTab = tab.key"
          >
            <el-icon><component :is="tab.icon" /></el-icon>
            {{ tab.label }}
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 基础表单 -->
    <div v-show="activeTab === 'basic'" class="form-section">
      <el-card class="form-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">基础表单</span>
            <span class="card-subtitle">基本的表单数据录入和验证</span>
          </div>
        </template>
      
      <el-form 
        ref="formRef" 
        :model="form" 
        :rules="rules" 
        label-width="120px"
        class="form-content"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="form.username" placeholder="请输入用户名" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱地址" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="form.gender">
                <el-radio label="male">男</el-radio>
                <el-radio label="female">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="城市" prop="city">
              <el-select v-model="form.city" placeholder="请选择城市" style="width: 100%">
                <el-option label="北京" value="beijing" />
                <el-option label="上海" value="shanghai" />
                <el-option label="深圳" value="shenzhen" />
                <el-option label="广州" value="guangzhou" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="兴趣爱好" prop="hobbies">
              <el-checkbox-group v-model="form.hobbies">
                <el-checkbox label="reading">阅读</el-checkbox>
                <el-checkbox label="music">音乐</el-checkbox>
                <el-checkbox label="sports">运动</el-checkbox>
                <el-checkbox label="travel">旅行</el-checkbox>
                <el-checkbox label="coding">编程</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="个人简介" prop="description">
              <el-input
                v-model="form.description"
                type="textarea"
                :rows="4"
                placeholder="请输入个人简介"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="技能等级" prop="skillLevel">
              <el-slider v-model="form.skillLevel" :max="100" show-input />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="是否公开" prop="isPublic">
              <el-switch v-model="form.isPublic" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm" :loading="loading">
            <el-icon><Check /></el-icon>
            提交
          </el-button>
          <el-button @click="resetForm">
            <el-icon><Refresh /></el-icon>
            重置
          </el-button>
          <el-button type="info" @click="fillDemo">
            <el-icon><Star /></el-icon>
            填充示例数据
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    </div>

    <!-- 高级表单 -->
    <div v-show="activeTab === 'advanced'" class="form-section">
      <el-card class="form-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">高级表单</span>
            <span class="card-subtitle">复杂的表单布局和动态表单项</span>
          </div>
        </template>
        
        <el-form 
          ref="advancedFormRef" 
          :model="advancedForm" 
          :rules="advancedRules" 
          label-width="120px"
          class="form-content"
        >
          <!-- 步骤条 -->
          <el-steps :active="currentStep" finish-status="success" class="form-steps">
            <el-step title="基本信息" description="填写个人基本信息" />
            <el-step title="工作信息" description="填写工作相关信息" />
            <el-step title="联系方式" description="填写联系方式" />
            <el-step title="完成" description="确认提交" />
          </el-steps>

          <!-- 步骤1: 基本信息 -->
          <div v-show="currentStep === 0" class="step-content">
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="头像" prop="avatar">
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    :http-request="handleAvatarUpload"
                  >
                    <img v-if="advancedForm.avatar" :src="advancedForm.avatar" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-row :gutter="16">
                  <el-col :span="12">
                    <el-form-item label="姓名" prop="fullName">
                      <el-input v-model="advancedForm.fullName" placeholder="请输入姓名" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="昵称" prop="nickname">
                      <el-input v-model="advancedForm.nickname" placeholder="请输入昵称" />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="16">
                  <el-col :span="12">
                    <el-form-item label="年龄" prop="age">
                      <el-input-number v-model="advancedForm.age" :min="1" :max="120" style="width: 100%" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="民族" prop="nationality">
                      <el-select v-model="advancedForm.nationality" placeholder="请选择民族" style="width: 100%">
                        <el-option label="汉族" value="han" />
                        <el-option label="回族" value="hui" />
                        <el-option label="蒙古族" value="mongol" />
                        <el-option label="其他" value="other" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>

          <!-- 步骤2: 工作信息 -->
          <div v-show="currentStep === 1" class="step-content">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="公司名称" prop="company">
                  <el-input v-model="advancedForm.company" placeholder="请输入公司名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职位" prop="position">
                  <el-input v-model="advancedForm.position" placeholder="请输入职位" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="工作年限" prop="experience">
                  <el-slider 
                    v-model="advancedForm.experience" 
                    :max="30" 
                    show-input 
                    :format-tooltip="formatExperience"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="薪资范围" prop="salaryRange">
                  <el-select v-model="advancedForm.salaryRange" placeholder="请选择薪资范围" style="width: 100%">
                    <el-option label="5K-10K" value="5-10" />
                    <el-option label="10K-20K" value="10-20" />
                    <el-option label="20K-30K" value="20-30" />
                    <el-option label="30K以上" value="30+" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="技能标签" prop="skills">
              <el-select 
                v-model="advancedForm.skills" 
                multiple 
                filterable 
                allow-create 
                placeholder="请选择或输入技能标签"
                style="width: 100%"
              >
                <el-option label="JavaScript" value="javascript" />
                <el-option label="Vue.js" value="vue" />
                <el-option label="React" value="react" />
                <el-option label="Python" value="python" />
                <el-option label="Java" value="java" />
                <el-option label="Node.js" value="nodejs" />
              </el-select>
            </el-form-item>
          </div>

          <!-- 步骤3: 联系方式 -->
          <div v-show="currentStep === 2" class="step-content">
            <el-form-item label="联系地址">
              <el-cascader
                v-model="advancedForm.address"
                :options="addressOptions"
                :props="{ expandTrigger: 'hover' }"
                placeholder="请选择地址"
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item label="详细地址" prop="detailAddress">
              <el-input v-model="advancedForm.detailAddress" placeholder="请输入详细地址" />
            </el-form-item>
            <el-form-item label="紧急联系人">
              <div v-for="(contact, index) in advancedForm.emergencyContacts" :key="index" class="contact-item">
                <el-row :gutter="16">
                  <el-col :span="8">
                    <el-input v-model="contact.name" placeholder="姓名" />
                  </el-col>
                  <el-col :span="8">
                    <el-input v-model="contact.phone" placeholder="电话" />
                  </el-col>
                  <el-col :span="6">
                    <el-select v-model="contact.relation" placeholder="关系">
                      <el-option label="父亲" value="father" />
                      <el-option label="母亲" value="mother" />
                      <el-option label="配偶" value="spouse" />
                      <el-option label="朋友" value="friend" />
                    </el-select>
                  </el-col>
                  <el-col :span="2">
                    <el-button type="danger" :icon="Delete" @click="removeContact(index)" />
                  </el-col>
                </el-row>
              </div>
              <el-button type="primary" :icon="Plus" @click="addContact" style="margin-top: 10px;">
                添加联系人
              </el-button>
            </el-form-item>
          </div>

          <!-- 步骤4: 确认信息 -->
          <div v-show="currentStep === 3" class="step-content">
            <el-descriptions title="信息确认" :column="2" border>
              <el-descriptions-item label="姓名">{{ advancedForm.fullName }}</el-descriptions-item>
              <el-descriptions-item label="昵称">{{ advancedForm.nickname }}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{ advancedForm.age }}</el-descriptions-item>
              <el-descriptions-item label="民族">{{ advancedForm.nationality }}</el-descriptions-item>
              <el-descriptions-item label="公司">{{ advancedForm.company }}</el-descriptions-item>
              <el-descriptions-item label="职位">{{ advancedForm.position }}</el-descriptions-item>
              <el-descriptions-item label="工作年限">{{ advancedForm.experience }}年</el-descriptions-item>
              <el-descriptions-item label="薪资范围">{{ advancedForm.salaryRange }}</el-descriptions-item>
              <el-descriptions-item label="技能" :span="2">
                <el-tag v-for="skill in advancedForm.skills" :key="skill" style="margin-right: 8px;">
                  {{ skill }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <!-- 步骤控制按钮 -->
          <el-form-item class="step-buttons">
            <el-button v-if="currentStep > 0" @click="currentStep--">上一步</el-button>
            <el-button v-if="currentStep < 3" type="primary" @click="nextStep">下一步</el-button>
            <el-button v-if="currentStep === 3" type="success" @click="submitAdvancedForm" :loading="loading">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 动态表单 -->
    <div v-show="activeTab === 'dynamic'" class="form-section">
      <el-card class="form-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">动态表单</span>
            <span class="card-subtitle">根据用户选择动态生成表单项</span>
          </div>
        </template>
        
        <el-form 
          ref="dynamicFormRef" 
          :model="dynamicForm" 
          label-width="120px"
          class="form-content"
        >
          <el-form-item label="表单类型">
            <el-radio-group v-model="dynamicForm.formType" @change="onFormTypeChange">
              <el-radio-button label="personal">个人信息</el-radio-button>
              <el-radio-button label="company">企业信息</el-radio-button>
              <el-radio-button label="education">教育信息</el-radio-button>
            </el-radio-group>
          </el-form-item>

          <!-- 动态生成的表单项 -->
          <transition-group name="form-item" tag="div">
            <div v-for="field in dynamicFields" :key="field.key" class="dynamic-field">
              <el-form-item :label="field.label" :prop="field.key">
                <!-- 文本输入 -->
                <el-input 
                  v-if="field.type === 'input'"
                  v-model="dynamicForm[field.key]"
                  :placeholder="field.placeholder"
                />
                <!-- 数字输入 -->
                <el-input-number 
                  v-else-if="field.type === 'number'"
                  v-model="dynamicForm[field.key]"
                  style="width: 100%"
                />
                <!-- 选择器 -->
                <el-select 
                  v-else-if="field.type === 'select'"
                  v-model="dynamicForm[field.key]"
                  :placeholder="field.placeholder"
                  style="width: 100%"
                >
                  <el-option 
                    v-for="option in field.options" 
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
                <!-- 日期选择 -->
                <el-date-picker 
                  v-else-if="field.type === 'date'"
                  v-model="dynamicForm[field.key]"
                  type="date"
                  :placeholder="field.placeholder"
                  style="width: 100%"
                />
                <!-- 文本域 -->
                <el-input 
                  v-else-if="field.type === 'textarea'"
                  v-model="dynamicForm[field.key]"
                  type="textarea"
                  :rows="3"
                  :placeholder="field.placeholder"
                />
              </el-form-item>
            </div>
          </transition-group>

          <el-form-item>
            <el-button type="primary" @click="submitDynamicForm" :loading="loading">
              <el-icon><Check /></el-icon>
              提交动态表单
            </el-button>
            <el-button @click="resetDynamicForm">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 图表示例 -->
    <div v-show="activeTab === 'charts'" class="form-section">
      <el-row :gutter="24">
        <!-- 柱状图 -->
        <el-col :span="12">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">销售数据柱状图</span>
                <span class="card-subtitle">展示月度销售业绩</span>
              </div>
            </template>
            <div class="chart-container">
              <v-chart class="chart" :option="barChartOption" autoresize />
            </div>
          </el-card>
        </el-col>

        <!-- 折线图 -->
        <el-col :span="12">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">用户增长趋势</span>
                <span class="card-subtitle">展示用户增长情况</span>
              </div>
            </template>
            <div class="chart-container">
              <v-chart class="chart" :option="lineChartOption" autoresize />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="margin-top: 24px;">
        <!-- 饼图 -->
        <el-col :span="12">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">市场份额分布</span>
                <span class="card-subtitle">各产品市场占比</span>
              </div>
            </template>
            <div class="chart-container">
              <v-chart class="chart" :option="pieChartOption" autoresize />
            </div>
          </el-card>
        </el-col>

        <!-- 雷达图 -->
        <el-col :span="12">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">技能评估雷达图</span>
                <span class="card-subtitle">展示个人技能水平</span>
              </div>
            </template>
            <div class="chart-container">
              <v-chart class="chart" :option="radarChartOption" autoresize />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="margin-top: 24px;">
        <!-- 散点图 -->
        <el-col :span="12">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">数据分析散点图</span>
                <span class="card-subtitle">展示数据相关性</span>
              </div>
            </template>
            <div class="chart-container">
              <v-chart class="chart" :option="scatterChartOption" autoresize />
            </div>
          </el-card>
        </el-col>

        <!-- 仪表盘 -->
        <el-col :span="12">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">系统性能监控</span>
                <span class="card-subtitle">实时监控系统状态</span>
              </div>
            </template>
            <div class="chart-container">
              <v-chart class="chart" :option="gaugeChartOption" autoresize />
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表控制面板 -->
      <el-row style="margin-top: 24px;">
        <el-col :span="24">
          <el-card class="chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span class="card-title">图表控制面板</span>
                <span class="card-subtitle">动态控制图表数据和样式</span>
              </div>
            </template>
            <div class="chart-controls">
              <el-row :gutter="16">
                <el-col :span="6">
                  <el-button 
                    type="primary" 
                    @click="refreshChartData" 
                    :loading="chartLoading"
                    style="width: 100%;"
                  >
                    <el-icon><Refresh /></el-icon>
                    刷新数据
                  </el-button>
                </el-col>
                <el-col :span="6">
                  <el-button 
                    type="success" 
                    @click="exportChart" 
                    style="width: 100%;"
                  >
                    <el-icon><Download /></el-icon>
                    导出图表
                  </el-button>
                </el-col>
                <el-col :span="6">
                  <el-select 
                    v-model="chartTheme" 
                    @change="changeChartTheme"
                    placeholder="选择主题"
                    style="width: 100%;"
                  >
                    <el-option label="默认主题" value="default" />
                    <el-option label="暗色主题" value="dark" />
                    <el-option label="蓝色主题" value="blue" />
                    <el-option label="绿色主题" value="green" />
                  </el-select>
                </el-col>
                <el-col :span="6">
                  <el-switch 
                    v-model="animationEnabled"
                    @change="toggleAnimation"
                    active-text="启用动画"
                    inactive-text="禁用动画"
                  />
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 表单验证演示 -->
    <div v-show="activeTab === 'validation'" class="form-section">
      <el-card class="form-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span class="card-title">表单验证演示</span>
            <span class="card-subtitle">各种表单验证规则和自定义验证</span>
          </div>
        </template>
        
        <el-form 
          ref="validationFormRef" 
          :model="validationForm" 
          :rules="validationRules" 
          label-width="140px"
          class="form-content"
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="validationForm.username" placeholder="3-20个字符">
                  <template #suffix>
                    <el-icon v-if="validationForm.username" :class="getUsernameStatus().class">
                      <component :is="getUsernameStatus().icon" />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码" prop="password">
                <el-input 
                  v-model="validationForm.password" 
                  type="password" 
                  show-password
                  placeholder="至少8位，包含数字和字母"
                />
                <div class="password-strength">
                  <div class="strength-bar">
                    <div 
                      class="strength-fill" 
                      :style="{ width: passwordStrength.percentage + '%' }"
                      :class="passwordStrength.level"
                    ></div>
                  </div>
                  <span class="strength-text">{{ passwordStrength.text }}</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input 
                  v-model="validationForm.confirmPassword" 
                  type="password" 
                  placeholder="请再次输入密码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号" prop="phone">
                <el-input v-model="validationForm.phone" placeholder="请输入手机号">
                  <template #prepend>+86</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="validationForm.idCard" placeholder="请输入身份证号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行卡号" prop="bankCard">
                <el-input v-model="validationForm.bankCard" placeholder="请输入银行卡号" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="个人网站" prop="website">
            <el-input v-model="validationForm.website" placeholder="请输入个人网站URL" />
          </el-form-item>

          <el-form-item label="验证码" prop="captcha">
            <el-row :gutter="16">
              <el-col :span="12">
                <el-input v-model="validationForm.captcha" placeholder="请输入验证码" />
              </el-col>
              <el-col :span="12">
                <div class="captcha-container" @click="refreshCaptcha">
                  <canvas ref="captchaCanvas" width="150" height="40"></canvas>
                </div>
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitValidationForm" :loading="loading">
              <el-icon><Check /></el-icon>
              验证并提交
            </el-button>
            <el-button @click="resetValidationForm">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart, LineChart, PieChart, RadarChart, ScatterChart, GaugeChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  RadarComponent,
  PolarComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { 
  Check, Refresh, Star, Plus, Delete, User, 
  Document, DataLine, Warning, SuccessFilled, 
  CircleCheckFilled, CircleCloseFilled, Download,
  TrendCharts
} from '@element-plus/icons-vue'

// 注册ECharts组件
use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  RadarChart,
  ScatterChart,
  GaugeChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  RadarComponent,
  PolarComponent
])

export default {
  name: 'FormExamples',
  components: {
    Check, Refresh, Star, Plus, Delete, User, 
    Document, DataLine, Warning, SuccessFilled, 
    CircleCheckFilled, CircleCloseFilled, Download,
    TrendCharts, VChart
  },
  setup() {
    const formRef = ref(null)
    const advancedFormRef = ref(null)
    const dynamicFormRef = ref(null)
    const validationFormRef = ref(null)
    const captchaCanvas = ref(null)
    
    const loading = ref(false)
    const activeTab = ref('basic')
    const currentStep = ref(0)
    const captchaText = ref('')

    // 表单标签页配置
    const formTabs = ref([
      { key: 'basic', label: '基础表单', icon: 'User' },
      { key: 'advanced', label: '高级表单', icon: 'Document' },
      { key: 'dynamic', label: '动态表单', icon: 'DataLine' },
      { key: 'charts', label: '图表示例', icon: 'TrendCharts' },
      { key: 'validation', label: '表单验证', icon: 'Warning' }
    ])
    
    // 基础表单数据
    const form = reactive({
      username: '',
      email: '',
      phone: '',
      gender: '',
      birthday: '',
      city: '',
      hobbies: [],
      description: '',
      skillLevel: 50,
      isPublic: false
    })
    
    // 基础表单验证规则
    const rules = reactive({
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ],
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
      ],
      gender: [
        { required: true, message: '请选择性别', trigger: 'change' }
      ],
      birthday: [
        { required: true, message: '请选择出生日期', trigger: 'change' }
      ],
      city: [
        { required: true, message: '请选择城市', trigger: 'change' }
      ]
    })

    // 高级表单数据
    const advancedForm = reactive({
      avatar: '',
      fullName: '',
      nickname: '',
      age: null,
      nationality: '',
      company: '',
      position: '',
      experience: 0,
      salaryRange: '',
      skills: [],
      address: [],
      detailAddress: '',
      emergencyContacts: [
        { name: '', phone: '', relation: '' }
      ]
    })

    // 高级表单验证规则
    const advancedRules = reactive({
      fullName: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ],
      age: [
        { required: true, message: '请输入年龄', trigger: 'blur' }
      ],
      company: [
        { required: true, message: '请输入公司名称', trigger: 'blur' }
      ]
    })

    // 地址选项
    const addressOptions = ref([
      {
        value: 'beijing',
        label: '北京',
        children: [
          { value: 'chaoyang', label: '朝阳区' },
          { value: 'haidian', label: '海淀区' },
          { value: 'xicheng', label: '西城区' }
        ]
      },
      {
        value: 'shanghai',
        label: '上海',
        children: [
          { value: 'huangpu', label: '黄浦区' },
          { value: 'xuhui', label: '徐汇区' },
          { value: 'changning', label: '长宁区' }
        ]
      }
    ])

    // 动态表单数据
    const dynamicForm = reactive({
      formType: 'personal'
    })

    // 动态表单字段配置
    const formFieldsConfig = {
      personal: [
        { key: 'name', label: '姓名', type: 'input', placeholder: '请输入姓名' },
        { key: 'age', label: '年龄', type: 'number' },
        { key: 'gender', label: '性别', type: 'select', placeholder: '请选择性别', 
          options: [
            { label: '男', value: 'male' },
            { label: '女', value: 'female' }
          ] 
        },
        { key: 'birthday', label: '生日', type: 'date', placeholder: '请选择生日' },
        { key: 'bio', label: '个人简介', type: 'textarea', placeholder: '请输入个人简介' }
      ],
      company: [
        { key: 'companyName', label: '公司名称', type: 'input', placeholder: '请输入公司名称' },
        { key: 'industry', label: '行业', type: 'select', placeholder: '请选择行业',
          options: [
            { label: '互联网', value: 'internet' },
            { label: '金融', value: 'finance' },
            { label: '教育', value: 'education' }
          ]
        },
        { key: 'establishDate', label: '成立时间', type: 'date', placeholder: '请选择成立时间' },
        { key: 'employeeCount', label: '员工数量', type: 'number' },
        { key: 'description', label: '公司描述', type: 'textarea', placeholder: '请输入公司描述' }
      ],
      education: [
        { key: 'school', label: '学校', type: 'input', placeholder: '请输入学校名称' },
        { key: 'major', label: '专业', type: 'input', placeholder: '请输入专业' },
        { key: 'degree', label: '学历', type: 'select', placeholder: '请选择学历',
          options: [
            { label: '本科', value: 'bachelor' },
            { label: '硕士', value: 'master' },
            { label: '博士', value: 'phd' }
          ]
        },
        { key: 'graduationDate', label: '毕业时间', type: 'date', placeholder: '请选择毕业时间' }
      ]
    }

    // 动态字段计算属性
    const dynamicFields = computed(() => {
      return formFieldsConfig[dynamicForm.formType] || []
    })

    // 图表相关状态
    const chartLoading = ref(false)
    const chartTheme = ref('default')
    const animationEnabled = ref(true)

    // 生成随机数据的辅助函数
    const generateRandomData = (count, min = 0, max = 100) => {
      return Array.from({ length: count }, () => Math.floor(Math.random() * (max - min + 1)) + min)
    }

    // 柱状图配置
    const barChartOption = reactive({
      title: {
        text: '月度销售额',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(50, 50, 50, 0.8)',
        borderColor: '#777',
        borderWidth: 1,
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        data: ['2023年', '2024年'],
        top: 30
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        }
      },
      series: [
        {
          name: '2023年',
          type: 'bar',
          data: generateRandomData(6, 20, 80),
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#667eea' },
                { offset: 1, color: '#764ba2' }
              ]
            }
          },
          emphasis: {
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#764ba2' },
                  { offset: 1, color: '#667eea' }
                ]
              }
            }
          }
        },
        {
          name: '2024年',
          type: 'bar',
          data: generateRandomData(6, 30, 90),
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#f093fb' },
                { offset: 1, color: '#f5576c' }
              ]
            }
          }
        }
      ],
      animation: true,
      animationDuration: 1000,
      animationEasing: 'cubicOut'
    })

    // 折线图配置
    const lineChartOption = reactive({
      title: {
        text: '用户增长趋势',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(50, 50, 50, 0.8)',
        borderColor: '#777',
        borderWidth: 1
      },
      legend: {
        data: ['新增用户', '活跃用户'],
        top: 30
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '新增用户',
          type: 'line',
          stack: 'Total',
          smooth: true,
          data: generateRandomData(7, 100, 500),
          lineStyle: {
            color: '#667eea',
            width: 3
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(102, 126, 234, 0.6)' },
                { offset: 1, color: 'rgba(102, 126, 234, 0.1)' }
              ]
            }
          }
        },
        {
          name: '活跃用户',
          type: 'line',
          stack: 'Total',
          smooth: true,
          data: generateRandomData(7, 200, 800),
          lineStyle: {
            color: '#f093fb',
            width: 3
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(240, 147, 251, 0.6)' },
                { offset: 1, color: 'rgba(240, 147, 251, 0.1)' }
              ]
            }
          }
        }
      ],
      animation: true,
      animationDuration: 2000
    })

    // 饼图配置
    const pieChartOption = reactive({
      title: {
        text: '产品市场份额',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        top: 'middle',
        data: ['产品A', '产品B', '产品C', '产品D', '产品E']
      },
      series: [
        {
          name: '市场份额',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['60%', '50%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 335, name: '产品A', itemStyle: { color: '#667eea' } },
            { value: 310, name: '产品B', itemStyle: { color: '#764ba2' } },
            { value: 234, name: '产品C', itemStyle: { color: '#f093fb' } },
            { value: 135, name: '产品D', itemStyle: { color: '#f5576c' } },
            { value: 158, name: '产品E', itemStyle: { color: '#4ecdc4' } }
          ],
          animation: true,
          animationType: 'scale',
          animationEasing: 'elasticOut'
        }
      ]
    })

    // 雷达图配置
    const radarChartOption = reactive({
      title: {
        text: '技能评估',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        data: ['个人技能', '团队平均'],
        top: 30
      },
      radar: {
        indicator: [
          { name: 'JavaScript', max: 100 },
          { name: 'Vue.js', max: 100 },
          { name: 'React', max: 100 },
          { name: 'Node.js', max: 100 },
          { name: 'Python', max: 100 },
          { name: 'Java', max: 100 }
        ],
        shape: 'polygon',
        splitNumber: 5,
        axisName: {
          color: '#333'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(102, 126, 234, 0.3)'
          }
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ['rgba(102, 126, 234, 0.1)', 'rgba(102, 126, 234, 0.05)']
          }
        }
      },
      series: [
        {
          name: '技能对比',
          type: 'radar',
          data: [
            {
              value: [85, 90, 70, 80, 75, 60],
              name: '个人技能',
              areaStyle: {
                color: 'rgba(102, 126, 234, 0.3)'
              },
              lineStyle: {
                color: '#667eea',
                width: 2
              }
            },
            {
              value: [75, 80, 85, 70, 85, 75],
              name: '团队平均',
              areaStyle: {
                color: 'rgba(240, 147, 251, 0.3)'
              },
              lineStyle: {
                color: '#f093fb',
                width: 2
              }
            }
          ],
          animation: true,
          animationDuration: 1500
        }
      ]
    })

    // 散点图配置
    const scatterChartOption = reactive({
      title: {
        text: '数据相关性分析',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: 'X: {c.0}<br/>Y: {c.1}'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        scale: true
      },
      yAxis: {
        type: 'value',
        scale: true
      },
      series: [
        {
          type: 'scatter',
          symbolSize: 8,
          data: Array.from({ length: 50 }, () => [
            Math.random() * 100,
            Math.random() * 100
          ]),
          itemStyle: {
            color: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                { offset: 0, color: '#667eea' },
                { offset: 1, color: '#764ba2' }
              ]
            }
          },
          emphasis: {
            scale: true,
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(102, 126, 234, 0.5)'
            }
          }
        }
      ],
      animation: true,
      animationDuration: 1000
    })

    // 仪表盘配置
    const gaugeChartOption = reactive({
      title: {
        text: 'CPU使用率',
        left: 'center',
        textStyle: {
          color: '#333',
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        formatter: '{a} <br/>{b}: {c}%'
      },
      series: [
        {
          name: 'CPU使用率',
          type: 'gauge',
          center: ['50%', '60%'],
          startAngle: 200,
          endAngle: -40,
          min: 0,
          max: 100,
          splitNumber: 10,
          itemStyle: {
            color: '#667eea'
          },
          progress: {
            show: true,
            width: 30
          },
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 30,
              color: [
                [0.3, '#4ecdc4'],
                [0.7, '#f093fb'],
                [1, '#f5576c']
              ]
            }
          },
          axisTick: {
            distance: -45,
            splitNumber: 5,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          splitLine: {
            distance: -52,
            length: 14,
            lineStyle: {
              width: 3,
              color: '#999'
            }
          },
          axisLabel: {
            distance: -20,
            color: '#999',
            fontSize: 12
          },
          anchor: {
            show: false
          },
          title: {
            show: false
          },
          detail: {
            valueAnimation: true,
            width: '60%',
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, '15%'],
            fontSize: 20,
            fontWeight: 'bold',
            formatter: '{value}%',
            color: 'inherit'
          },
          data: [
            {
              value: Math.floor(Math.random() * 80) + 20
            }
          ]
        }
      ]
    })

    // 验证表单数据
    const validationForm = reactive({
      username: '',
      password: '',
      confirmPassword: '',
      phone: '',
      idCard: '',
      bankCard: '',
      website: '',
      captcha: ''
    })

    // 密码强度计算
    const passwordStrength = computed(() => {
      const password = validationForm.password
      if (!password) return { percentage: 0, level: '', text: '请输入密码' }
      
      let score = 0
      let level = ''
      let text = ''
      
      // 长度检查
      if (password.length >= 8) score += 25
      // 包含数字
      if (/\d/.test(password)) score += 25
      // 包含小写字母
      if (/[a-z]/.test(password)) score += 25
      // 包含大写字母或特殊字符
      if (/[A-Z]/.test(password) || /[!@#$%^&*(),.?":{}|<>]/.test(password)) score += 25
      
      if (score < 50) {
        level = 'weak'
        text = '弱'
      } else if (score < 75) {
        level = 'medium'
        text = '中'
      } else {
        level = 'strong'
        text = '强'
      }
      
      return { percentage: score, level, text }
    })

    // 自定义验证规则
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 8) {
        callback(new Error('密码长度不能少于8位'))
      } else if (!/(?=.*[0-9])(?=.*[a-zA-Z])/.test(value)) {
        callback(new Error('密码必须包含数字和字母'))
      } else {
        callback()
      }
    }

    const validateConfirmPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== validationForm.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }

    const validateIdCard = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入身份证号'))
      } else if (!/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(value)) {
        callback(new Error('请输入正确的身份证号'))
      } else {
        callback()
      }
    }

    const validateBankCard = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入银行卡号'))
      } else if (!/^\d{16,19}$/.test(value)) {
        callback(new Error('请输入正确的银行卡号'))
      } else {
        callback()
      }
    }

    const validateWebsite = (rule, value, callback) => {
      if (value && !/^https?:\/\/.+/.test(value)) {
        callback(new Error('请输入正确的网站地址'))
      } else {
        callback()
      }
    }

    const validateCaptcha = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'))
      } else if (value.toLowerCase() !== captchaText.value.toLowerCase()) {
        callback(new Error('验证码错误'))
      } else {
        callback()
      }
    }

    // 验证表单规则
    const validationRules = reactive({
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9_]+$/, message: '只能包含字母、数字和下划线', trigger: 'blur' }
      ],
      password: [
        { validator: validatePassword, trigger: 'blur' }
      ],
      confirmPassword: [
        { validator: validateConfirmPassword, trigger: 'blur' }
      ],
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
      ],
      idCard: [
        { validator: validateIdCard, trigger: 'blur' }
      ],
      bankCard: [
        { validator: validateBankCard, trigger: 'blur' }
      ],
      website: [
        { validator: validateWebsite, trigger: 'blur' }
      ],
      captcha: [
        { validator: validateCaptcha, trigger: 'blur' }
      ]
    })

    // 方法实现
    const submitForm = async () => {
      try {
        loading.value = true
        await formRef.value.validate()
        console.log('基础表单数据:', form)
        ElMessage.success('基础表单提交成功！')
      } catch (error) {
        ElMessage.error('请检查表单数据')
      } finally {
        loading.value = false
      }
    }
    
    const resetForm = () => {
      formRef.value.resetFields()
      ElMessage.info('基础表单已重置')
    }
    
    const fillDemo = () => {
      Object.assign(form, {
        username: 'demo_user',
        email: 'demo@example.com',
        phone: '13800138000',
        gender: 'male',
        birthday: new Date('1990-01-01'),
        city: 'beijing',
        hobbies: ['reading', 'coding'],
        description: '这是一个示例用户的个人简介，展示了基础表单的各种功能。',
        skillLevel: 75,
        isPublic: true
      })
      ElMessage.success('示例数据已填充')
    }

    // 高级表单方法
    const nextStep = async () => {
      try {
        await advancedFormRef.value.validateField(getStepFields(currentStep.value))
        currentStep.value++
      } catch (error) {
        ElMessage.error('请填写必填项')
      }
    }

    const getStepFields = (step) => {
      const stepFields = {
        0: ['fullName', 'age'],
        1: ['company'],
        2: [],
        3: []
      }
      return stepFields[step] || []
    }

    const submitAdvancedForm = async () => {
      try {
        loading.value = true
        await advancedFormRef.value.validate()
        console.log('高级表单数据:', advancedForm)
        ElMessage.success('高级表单提交成功！')
      } catch (error) {
        ElMessage.error('请检查表单数据')
      } finally {
        loading.value = false
      }
    }

    const formatExperience = (value) => {
      return `${value}年`
    }

    const beforeAvatarUpload = (file) => {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        ElMessage.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }

    const handleAvatarUpload = (option) => {
      // 模拟上传
      const reader = new FileReader()
      reader.onload = (e) => {
        advancedForm.avatar = e.target.result
      }
      reader.readAsDataURL(option.file)
    }

    const addContact = () => {
      advancedForm.emergencyContacts.push({
        name: '',
        phone: '',
        relation: ''
      })
    }

    const removeContact = (index) => {
      advancedForm.emergencyContacts.splice(index, 1)
    }

    // 动态表单方法
    const onFormTypeChange = () => {
      // 清空之前的表单数据
      Object.keys(dynamicForm).forEach(key => {
        if (key !== 'formType') {
          delete dynamicForm[key]
        }
      })
    }

    const submitDynamicForm = () => {
      loading.value = true
      setTimeout(() => {
        console.log('动态表单数据:', dynamicForm)
        ElMessage.success('动态表单提交成功！')
        loading.value = false
      }, 1000)
    }

    const resetDynamicForm = () => {
      onFormTypeChange()
      ElMessage.info('动态表单已重置')
    }

    // 图表相关方法
    const refreshChartData = () => {
      chartLoading.value = true
      
      setTimeout(() => {
        // 刷新柱状图数据
        barChartOption.series[0].data = generateRandomData(6, 20, 80)
        barChartOption.series[1].data = generateRandomData(6, 30, 90)
        
        // 刷新折线图数据
        lineChartOption.series[0].data = generateRandomData(7, 100, 500)
        lineChartOption.series[1].data = generateRandomData(7, 200, 800)
        
        // 刷新散点图数据
        scatterChartOption.series[0].data = Array.from({ length: 50 }, () => [
          Math.random() * 100,
          Math.random() * 100
        ])
        
        // 刷新仪表盘数据
        gaugeChartOption.series[0].data[0].value = Math.floor(Math.random() * 80) + 20
        
        chartLoading.value = false
        ElMessage.success('图表数据已刷新')
      }, 1500)
    }

    const exportChart = () => {
      ElMessage.info('图表导出功能开发中...')
    }

    const changeChartTheme = (theme) => {
      const themes = {
        default: {
          backgroundColor: '#fff',
          textColor: '#333',
          primaryColor: '#667eea',
          secondaryColor: '#764ba2'
        },
        dark: {
          backgroundColor: '#2c3e50',
          textColor: '#ecf0f1',
          primaryColor: '#3498db',
          secondaryColor: '#9b59b6'
        },
        blue: {
          backgroundColor: '#f8f9ff',
          textColor: '#2c3e50',
          primaryColor: '#3498db',
          secondaryColor: '#2980b9'
        },
        green: {
          backgroundColor: '#f0fff4',
          textColor: '#2d5016',
          primaryColor: '#27ae60',
          secondaryColor: '#2ecc71'
        }
      }
      
      const selectedTheme = themes[theme]
      
      // 更新所有图表的颜色主题
      const updateChartTheme = (option) => {
        if (option.title) {
          option.title.textStyle.color = selectedTheme.textColor
        }
        if (option.backgroundColor !== undefined) {
          option.backgroundColor = selectedTheme.backgroundColor
        }
      }
      
      updateChartTheme(barChartOption)
      updateChartTheme(lineChartOption)
      updateChartTheme(pieChartOption)
      updateChartTheme(radarChartOption)
      updateChartTheme(scatterChartOption)
      updateChartTheme(gaugeChartOption)
      
      ElMessage.success(`已切换到${theme === 'default' ? '默认' : theme}主题`)
    }

    const toggleAnimation = (enabled) => {
      const charts = [
        barChartOption,
        lineChartOption,
        pieChartOption,
        radarChartOption,
        scatterChartOption,
        gaugeChartOption
      ]
      
      charts.forEach(chart => {
        chart.animation = enabled
      })
      
      ElMessage.success(`动画效果已${enabled ? '启用' : '禁用'}`)
    }

    // 验证表单方法
    const submitValidationForm = async () => {
      try {
        loading.value = true
        await validationFormRef.value.validate()
        console.log('验证表单数据:', validationForm)
        ElMessage.success('验证表单提交成功！')
      } catch (error) {
        ElMessage.error('请检查表单数据')
      } finally {
        loading.value = false
      }
    }

    const resetValidationForm = () => {
      validationFormRef.value.resetFields()
      refreshCaptcha()
      ElMessage.info('验证表单已重置')
    }

    const getUsernameStatus = () => {
      const username = validationForm.username
      if (!username) return { icon: '', class: '' }
      
      if (username.length >= 3 && username.length <= 20 && /^[a-zA-Z0-9_]+$/.test(username)) {
        return { icon: 'SuccessFilled', class: 'username-success' }
      } else {
        return { icon: 'CircleCloseFilled', class: 'username-error' }
      }
    }

    // 验证码生成
    const generateCaptcha = () => {
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
      let result = ''
      for (let i = 0; i < 4; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length))
      }
      return result
    }

    const drawCaptcha = () => {
      const canvas = captchaCanvas.value
      if (!canvas) return
      
      const ctx = canvas.getContext('2d')
      const text = generateCaptcha()
      captchaText.value = text
      
      // 清空画布
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      
      // 设置背景
      ctx.fillStyle = '#f0f0f0'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      
      // 绘制干扰线
      for (let i = 0; i < 6; i++) {
        ctx.strokeStyle = `hsl(${Math.random() * 360}, 50%, 70%)`
        ctx.beginPath()
        ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height)
        ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height)
        ctx.stroke()
      }
      
      // 绘制文字
      ctx.font = '24px Arial'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      
      for (let i = 0; i < text.length; i++) {
        ctx.fillStyle = `hsl(${Math.random() * 360}, 70%, 40%)`
        ctx.save()
        ctx.translate(20 + i * 30, canvas.height / 2)
        ctx.rotate((Math.random() - 0.5) * 0.4)
        ctx.fillText(text[i], 0, 0)
        ctx.restore()
      }
      
      // 绘制干扰点
      for (let i = 0; i < 20; i++) {
        ctx.fillStyle = `hsl(${Math.random() * 360}, 50%, 50%)`
        ctx.beginPath()
        ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, 1, 0, 2 * Math.PI)
        ctx.fill()
      }
    }

    const refreshCaptcha = () => {
      nextTick(() => {
        drawCaptcha()
      })
    }

    // 生命周期
    onMounted(() => {
      refreshCaptcha()
    })
    
    return {
      // refs
      formRef,
      advancedFormRef,
      dynamicFormRef,
      validationFormRef,
      captchaCanvas,
      
      // 状态
      loading,
      activeTab,
      currentStep,
      formTabs,
      
      // 基础表单
      form,
      rules,
      submitForm,
      resetForm,
      fillDemo,
      
      // 高级表单
      advancedForm,
      advancedRules,
      addressOptions,
      nextStep,
      submitAdvancedForm,
      formatExperience,
      beforeAvatarUpload,
      handleAvatarUpload,
      addContact,
      removeContact,
      
      // 动态表单
      dynamicForm,
      dynamicFields,
      onFormTypeChange,
      submitDynamicForm,
      resetDynamicForm,
      
      // 图表相关
      chartLoading,
      chartTheme,
      animationEnabled,
      barChartOption,
      lineChartOption,
      pieChartOption,
      radarChartOption,
      scatterChartOption,
      gaugeChartOption,
      refreshChartData,
      exportChart,
      changeChartTheme,
      toggleAnimation,
      
      // 验证表单
      validationForm,
      validationRules,
      submitValidationForm,
      resetValidationForm,
      getUsernameStatus,
      passwordStrength,
      refreshCaptcha
    }
  }
}
</script>

<style scoped>
.form-examples-page {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}

/* 页面头部样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px 32px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.header-content h1.page-title {
  font-size: 28px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-subtitle {
  font-size: 16px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

.header-actions .el-button-group {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 图表卡片样式 */
.chart-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
  background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
}

.chart-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.chart-container {
  padding: 20px;
  position: relative;
  background: white;
  border-radius: 12px;
  margin: 16px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chart {
  height: 300px;
  width: 100%;
}

.chart-controls {
  padding: 24px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-radius: 12px;
  margin: 16px;
}

.chart-controls .el-row {
  align-items: center;
}

/* 图表动画效果 */
@keyframes chartFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chart-card .chart-container {
  animation: chartFadeIn 0.6s ease-out;
}

/* 图表加载状态 */
.chart-loading {
  position: relative;
}

.chart-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 10;
  border-radius: 12px;
}

.chart-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #667eea;
  border-radius: 50%;
  animation: chartSpin 1s linear infinite;
  z-index: 11;
}

@keyframes chartSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 图表主题样式 */
.chart-theme-dark .chart-container {
  background: #2c3e50;
  color: #ecf0f1;
}

.chart-theme-blue .chart-container {
  background: linear-gradient(135deg, #f8f9ff 0%, #e3f2fd 100%);
}

.chart-theme-green .chart-container {
  background: linear-gradient(135deg, #f0fff4 0%, #e8f5e8 100%);
}

/* 响应式图表 */
@media (max-width: 768px) {
  .chart {
    height: 250px;
  }
  
  .chart-container {
    padding: 12px;
    margin: 8px;
  }
  
  .chart-controls {
    padding: 16px;
    margin: 8px;
  }
  
  .chart-controls .el-col {
    margin-bottom: 12px;
  }
  
  .chart-controls .el-col:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .chart {
    height: 200px;
  }
  
  .chart-card .card-title {
    font-size: 16px;
  }
  
  .chart-card .card-subtitle {
    font-size: 12px;
  }
}

/* 表单区域样式 */
.form-section {
  margin-bottom: 24px;
}

.form-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.form-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.card-header::before {
  content: '';
  position: absolute;
  top: -16px;
  left: -16px;
  right: -16px;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.card-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.form-content {
  padding: 32px 24px;
}

/* 步骤条样式 */
.form-steps {
  margin: 0 0 40px 0;
  padding: 24px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-radius: 12px;
}

.step-content {
  padding: 24px 0;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.step-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

/* 头像上传样式 */
.avatar-uploader {
  border: 2px dashed #d9d9d9;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-uploader:hover {
  border-color: #409eff;
  background-color: #f8f9ff;
}

.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
}

.avatar-uploader-icon {
  font-size: 32px;
  color: #999;
}

/* 联系人列表样式 */
.contact-item {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 12px;
  border-left: 4px solid #667eea;
  transition: all 0.3s ease;
}

.contact-item:hover {
  background: #f0f2ff;
  transform: translateX(4px);
}

/* 动态表单动画 */
.form-item-enter-active, .form-item-leave-active {
  transition: all 0.4s ease;
}

.form-item-enter-from, .form-item-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.form-item-move {
  transition: transform 0.4s ease;
}

.dynamic-field {
  margin-bottom: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%);
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.dynamic-field:hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

/* 密码强度样式 */
.password-strength {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.strength-bar {
  flex: 1;
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
}

.strength-fill {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.strength-fill.weak {
  background: linear-gradient(90deg, #ef4444 0%, #f97316 100%);
}

.strength-fill.medium {
  background: linear-gradient(90deg, #f59e0b 0%, #eab308 100%);
}

.strength-fill.strong {
  background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.strength-text {
  font-size: 12px;
  font-weight: 500;
  min-width: 20px;
}

/* 用户名状态样式 */
.username-success {
  color: #10b981;
}

.username-error {
  color: #ef4444;
}

/* 验证码样式 */
.captcha-container {
  cursor: pointer;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  display: inline-block;
  transition: all 0.3s ease;
}

.captcha-container:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

/* 表单项增强样式 */
:deep(.el-form-item__label) {
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

:deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

:deep(.el-button--success) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

:deep(.el-button--info) {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

:deep(.el-select__wrapper) {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

:deep(.el-date-editor) {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

:deep(.el-textarea__inner) {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

:deep(.el-slider__runway) {
  border-radius: 3px;
}

:deep(.el-slider__button) {
  border: 2px solid #667eea;
  background: white;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #667eea;
  border-color: #667eea;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  border-color: #667eea;
  background: #667eea;
}

:deep(.el-switch.is-checked .el-switch__core) {
  background-color: #667eea;
}

/* 标签样式 */
:deep(.el-tag) {
  border-radius: 20px;
  border: none;
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 描述列表样式 */
:deep(.el-descriptions) {
  background: white;
  border-radius: 12px;
  overflow: hidden;
}

:deep(.el-descriptions__header) {
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  padding: 20px;
}

:deep(.el-descriptions__title) {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

/* 步骤条样式增强 */
:deep(.el-steps--horizontal .el-step__line) {
  background: linear-gradient(90deg, #e5e7eb 0%, #d1d5db 100%);
}

:deep(.el-step.is-finish .el-step__line) {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
}

:deep(.el-step__icon.is-text) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  font-weight: 600;
}

:deep(.el-step.is-finish .el-step__icon) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-examples-page {
    padding: 12px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    text-align: center;
  }
  
  .header-actions {
    justify-content: center;
  }
  
  .form-content {
    padding: 20px 16px;
  }
  
  :deep(.el-col) {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  .contact-item .el-col:last-child {
    margin-top: 12px;
  }
  
  .step-buttons {
    flex-direction: column;
  }
  
  .header-actions .el-button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .header-actions .el-button-group .el-button {
    flex: 1;
    min-width: 0;
  }
  
  .header-actions .el-button-group .el-button span {
    display: none;
  }
  
  .avatar-uploader {
    width: 80px;
    height: 80px;
  }
  
  .avatar {
    width: 80px;
    height: 80px;
  }
}

/* 加载动画 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.form-card.loading {
  animation: pulse 1.5s ease-in-out infinite;
}

/* 提交成功动画 */
@keyframes bounce {
  0%, 20%, 60%, 100% { transform: translateY(0); }
  40% { transform: translateY(-20px); }
  80% { transform: translateY(-10px); }
}

.success-animation {
  animation: bounce 0.6s ease-in-out;
}
</style>
